<template>
    <view class="pages">
        <view class="pay">
            <view class="title">应付金额</view>
            <view class="top-box-center">
                <view class="character">￥</view>
                <view class="num">{{ parseFloat(orderModel.orderAmount || 0).toFixed(2) }}</view>
            </view>
        </view>
        <view class="line"></view>

        <u-radio-group v-model="payMethod" activeColor="#ff8e0c">
            <u-cell-group :border="false">
                <block v-for="(item, index) in payment_method_lsit" :key="index">
                    <u-cell :title="item.title" :label="item.label" :border="false">
                        <view class="m-r-10 flex-c transportation-route-iamge-box" slot="icon">
							<u-icon :name="item.icon" :color="item.color" size="28"></u-icon>
                        </view>
                        <u-radio slot="right-icon" :checked="true" shape="circle" label=" " :name="item.value"></u-radio>
                    </u-cell>
                </block>
            </u-cell-group>
        </u-radio-group>

        <view class="bottom">
            <view class="bottom-cont">
                <view class="">
                    <view class="bottom-left">
                        <view class="bottom-txt">合计：</view>
                        <view class="bottom-price">￥ {{ parseFloat(orderModel.orderAmount || 0).toFixed(2) }}</view>
                    </view>
                    <view class="bottom-tips">共{{ orderModel.seatCount || 0 }}张</view>
                </view>
                <view class="bottom-right">
                    <u-button @click="payClick" type="warning" shape="circle" text="确定支付"></u-button>
                </view>
            </view>
        </view>
        <x-loading :show="isCheckEmpty(orderModel)"></x-loading>
    </view>
</template>

<script>
import { getOrderInfo, createOrder, alipay } from '@/sub_pages/movie/common/api/movie.js';
import { getPaymentMethodList } from '@/sub_pages/movie/const/payment-method.js';
import service from './service';

import xLoading from '@/sub_pages/movie/components/x-loading/x-loading.vue';

export default {
    components: {
        xLoading,
    },
    data() {
        return {
            options: {}, // 存储url携带参数
            balance: {}, // 用户账户基础信息
            orderModel: {}, // 订单详情
            couponCards: {}, // 优惠券信息
            selctCouponCards: [], // 选中优惠卡
            isBalance: false, // 是否使用余额抵扣
            usedType: '2', // 记录使用的常规兑换券还是特殊兑换劵
            couponCount: 0, // 当前可用优惠券数量
            usedSelectCoupons: [], // 选中优惠券列表
            usedCouponType: 0, // 选择的优惠券使用权限
            payment_method_lsit: getPaymentMethodList(),
			/* #ifdef H5 */
			payMethod: 1,
			/* #endif */
			/* #ifdef MP-WEIXIN */
			payMethod: 2,
			/* #endif */
        };
    },
    computed: {
        
    },
    onLoad(e) {
        this.options = e;

        this.init();
    },

    methods: {
        // 初始化
        async init() {
            if (this.options.orderId) {
                const res = await getOrderInfo({
                    id: this.options.orderId,
                });
                this.orderModel = Object.assign(res.data?.order ?? {}, res.data?.orderDetail ?? {});
            } else {
                this.getPlaceOrder();
            }
        },

        // 生成新订单并获取订单信息
        async getPlaceOrder() {
            service.getPlaceOrder(this);
        },

        // 开始支付
        async payClick() {
            try {
                getApp().globalData.subcontracting_movie?.$utils?.showLoading?.('支付中...');

				let userInfo;
				if (uni.getStorageSync("userInfo")) {
					userInfo = JSON.parse(uni.getStorageSync("userInfo"));
				}

                let params = {
                    orderId: this.orderModel.orderId,
					amount: this.orderModel.orderAmount * 100,
					mobile: userInfo.username,
					/* #ifdef MP-WEIXIN */
					openId: userInfo.wxOpenId,
					/* #endif */
					payMethod: this.payMethod,
					/* #ifdef H5 */
					tradeType: 'H5',
					/* #endif */
					/* #ifdef MP-WEIXIN */
					tradeType: 'JSAPI',
					/* #endif */
                };

                let res = this.payMethod == 1 ? await alipay(params) : await createOrder(params);
				
				if (res && this.payMethod == 1) {
					uni.setStorageSync("html", res);
					uni.redirectTo({
						url: '/sub_pages/movie/pay/alipay',
					});
				} else if (res.data && this.payMethod == 2) {
					await service.wxPay(res.data);
					getApp().globalData.subcontracting_movie?.$utils?.showToast?.('支付成功');
					uni.$u.sleep(500).then(() => {
					    uni.redirectTo({
					        url: '/sub_pages/movie/detail/detail?orderId=' + this.orderModel.orderId,
					    });
					});
				}
            } catch (e) {
                console.log('errMsg: ', e);
                uni.hideLoading();
            }
        },

        isCheckEmpty(obj) {
            return getApp().globalData.subcontracting_movie?.$utils?.isCheckEmpty?.(obj);
        },
    },
};
</script>

<style lang="scss">
/deep/ .u-button {
    width: auto !important;
}
/deep/ .u-cell__body {
    padding: 30rpx 20rpx !important;
}
</style>

<style lang="scss" scoped>
@import '@/sub_pages/movie/static/css/public.scss';
@import './var.scss';
.transportation-route-iamge-box {
    width: 60rpx;
    height: 60rpx;
    border-radius: 8rpx;

    .iconfont {
        font-size: 60rpx;
    }
}
</style>
